<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <style>
        .list{
            display: flex;
            list-style: none;
            margin: 0;
            padding: 0;
            flex-wrap: wrap;
            justify-content: center;
        }
        .list .card .thumb{
            width: 80px;
            background-color: black;
            display: flex;
            justify-content: center;
            overflow: hidden;
            transform: skewX(-10deg);
            border-radius: 10px 5px 10px 5px;
            margin: 0 10px;
        }
        .list .card .thumb img{
            transform: skewX(15deg);
        }
        .list .card .title span{
            background-color: red;
        }
    </style>
</head>

<body>
    <div id="app">
        <ul class="list">
            <li class="card" v-for="hero in heroes">
                <div class="thumb">

                    <img :src="hero.icon" alt="">
                </div>
                <h5>{{hero.name}}</h5>
            </li>
        </ul>
    </div>
    <script>
        var heroes = [
            {
                href: "/heroes/sigma",
                name: "西格玛",
                role: "重装",
                id: "tank",
                description:
                    "性格古怪的天体物理学家，在一场轨道空间站中的实验事故之后，被改造成了活体兵器。",
                overlay:
                    "https://overwatch.nosdn.127.net/2/heroes/Sigma/full-portrait.png",
                icon: "https://overwatch.nosdn.127.net/2/heroes/Sigma/icon-portrait.png",
            },
            {
                href: "/heroes/wrecking-ball",
                name: "“破坏球”",
                role: "重装",
                id: "tank",
                description:
                    "驾驶这台滚动式坦克的是一只经过基因改造的仓鼠，他来自月球基地。",
                overlay:
                    "https://overwatch.nosdn.127.net/1/images/v2/home/overlay/wrecking-ball.png",
                icon: "https://overwatch.nosdn.127.net/1/images/heroes/wrecking-ball/icon-portrait.png",
            },
            {
                href: "/heroes/dva",
                name: "D.Va",
                role: "重装",
                id: "tank",
                description:
                    "一名前职业玩家，而现在则利用自己的技巧驾驶一台尖端机甲保卫国家。",
                overlay:
                    "https://overwatch.nosdn.127.net/1/images/v2/home/overlay/dva.png",
                icon: "https://overwatch.nosdn.127.net/1/images/heroes/dva/icon-portrait.png",
            },
            {
                href: "/heroes/orisa",
                name: "奥丽莎",
                role: "重装",
                id: "tank",
                description: "维护努巴尼秩序并保护努巴尼人民的维和机器人。",
                overlay:
                    "https://overwatch.nosdn.127.net/1/images/v2/home/overlay/orisa.png",
                icon: "https://overwatch.nosdn.127.net/1/images/heroes/orisa/icon-portrait.png",
            },
            {
                href: "/heroes/reinhardt",
                name: "莱因哈特",
                role: "重装",
                id: "tank",
                description:
                    "一名属于过去的勇士，时刻铭记着骑士的信条：无畏、公正、勇敢。",
                overlay:
                    "https://overwatch.nosdn.127.net/1/images/v2/home/overlay/reinhardt.png",
                icon: "https://overwatch.nosdn.127.net/1/images/heroes/reinhardt/icon-portrait.png",
            },
            {
                href: "/heroes/roadhog",
                name: "“路霸”",
                role: "重装",
                id: "tank",
                description: "一名残暴的杀手，因残忍和肆意破坏而臭名昭著。",
                overlay:
                    "https://overwatch.nosdn.127.net/1/images/v2/home/overlay/roadhog.png",
                icon: "https://overwatch.nosdn.127.net/1/images/heroes/roadhog/icon-portrait.png",
            },
            {
                href: "/heroes/winston",
                name: "温斯顿",
                role: "重装",
                id: "tank",
                description:
                    "一只经过基因改造，拥有高等智慧的大猩猩，也是一位出色的科学家和代表着人类潜力的勇士。",
                overlay:
                    "https://overwatch.nosdn.127.net/1/images/v2/home/overlay/winston.png",
                icon: "https://overwatch.nosdn.127.net/1/images/heroes/winston/icon-portrait.png",
            },
            {
                href: "/heroes/zarya",
                name: "查莉娅",
                role: "重装",
                id: "tank",
                description:
                    "世界上最强壮的女性之一。为了保卫祖国，毅然放弃了个人荣誉。",
                overlay:
                    "https://overwatch.nosdn.127.net/1/images/v2/home/overlay/zarya.png",
                icon: "https://overwatch.nosdn.127.net/1/images/heroes/zarya/icon-portrait.png",
            },
            {
                href: "/heroes/echo",
                name: "“回声”",
                role: "输出",
                id: "damage",
                description:
                    "“回声”是一台可以自行进化的机器人，装载了能够高速自我调整的人工智能，代表着科技的最尖端水平。",
                overlay:
                    "https://overwatch.nosdn.127.net/1/images/v2/home/overlay/echo.png",
                icon: "https://overwatch.nosdn.127.net/1/images/heroes/echo/icon-portrait.png",
            },
            {
                href: "/heroes/ashe",
                name: "艾什",
                role: "输出",
                id: "damage",
                description: "肆虐美国西南部、臭名昭著的死局帮的首脑。",
                overlay:
                    "https://overwatch.nosdn.127.net/1/images/v2/home/overlay/ashe.png",
                icon: "https://overwatch.nosdn.127.net/1/images/heroes/ashe/icon-portrait.png",
            },
            {
                href: "/heroes/doomfist",
                name: "“末日铁拳”",
                role: "输出",
                id: "damage",
                description:
                    "一位利用个人头脑、魅力和蛮力来创建一个更强大世界的战术家。",
                overlay:
                    "https://overwatch.nosdn.127.net/1/images/v2/home/overlay/doomfist.png",
                icon: "https://overwatch.nosdn.127.net/1/assets/images/hero/doomfist/icon-portrait.png",
            },
            {
                href: "/heroes/bastion",
                name: "“堡垒”",
                role: "输出",
                id: "damage",
                description:
                    "一名可以切换形态的机器人，为自然着迷而探索世界，同时也对人类保持着戒心。",
                overlay:
                    "https://overwatch.nosdn.127.net/1/images/v2/home/overlay/bastion.png",
                icon: "https://overwatch.nosdn.127.net/1/images/heroes/bastion/icon-portrait.png",
            },
            {
                href: "/heroes/genji",
                name: "源氏",
                role: "输出",
                id: "damage",
                description:
                    "一名致命的半机械忍者，通过他的机械躯体寻得了身心的和谐。",
                overlay:
                    "https://overwatch.nosdn.127.net/1/images/v2/home/overlay/genji.png",
                icon: "https://overwatch.nosdn.127.net/1/images/heroes/genji/icon-portrait.png",
            },
            {
                href: "/heroes/hanzo",
                name: "半藏",
                role: "输出",
                id: "damage",
                description: "一名强大而致命的弓箭大师。",
                overlay:
                    "https://overwatch.nosdn.127.net/1/images/v2/home/overlay/hanzo.png",
                icon: "https://overwatch.nosdn.127.net/1/images/heroes/hanzo/icon-portrait.png",
            },
            {
                href: "/heroes/junkrat",
                name: "“狂鼠”",
                role: "输出",
                id: "damage",
                description: "一名满脑子都是爆炸的变态疯子，只为了混乱和破坏而活。",
                overlay:
                    "https://overwatch.nosdn.127.net/1/images/v2/home/overlay/junkrat.png",
                icon: "https://overwatch.nosdn.127.net/1/images/heroes/junkrat/icon-portrait.png",
            },
            {
                href: "/heroes/mccree",
                name: "麦克雷",
                role: "输出",
                id: "damage",
                description: "一名亡命天涯的神枪手，以自己的方式伸张正义。",
                overlay:
                    "https://overwatch.nosdn.127.net/1/images/v2/home/overlay/mccree.png",
                icon: "https://overwatch.nosdn.127.net/1/images/heroes/mccree/icon-portrait.png",
            },
            {
                href: "/heroes/mei",
                name: "美",
                role: "输出",
                id: "damage",
                description: "一名能够操控天气，为了保护环境而选择战斗的科学家。",
                overlay:
                    "https://overwatch.nosdn.127.net/1/images/v2/home/overlay/mei.png",
                icon: "https://overwatch.nosdn.127.net/1/images/heroes/frost/icon-portrait.png",
            },
            {
                href: "/heroes/pharah",
                name: "“法老之鹰”",
                role: "输出",
                id: "damage",
                description:
                    "一名恪守岗位的战士，用实验性的“猛禽”作战服确保天空的安全。",
                overlay:
                    "https://overwatch.nosdn.127.net/1/images/v2/home/overlay/pharah.png",
                icon: "https://overwatch.nosdn.127.net/1/images/heroes/pharah/icon-portrait.png",
            },
            {
                href: "/heroes/reaper",
                name: "“死神”",
                role: "输出",
                id: "damage",
                description: "一名无情的杀手，一直在追杀前守望先锋的特工们。",
                overlay:
                    "https://overwatch.nosdn.127.net/1/images/v2/home/overlay/reaper.png",
                icon: "https://overwatch.nosdn.127.net/1/images/heroes/reaper/icon-portrait.png",
            },
            {
                href: "/heroes/soldier-76",
                name: "“士兵：76”",
                role: "输出",
                id: "damage",
                description: "一名试图自己将守望先锋敌人绳之于法的独行侠。",
                overlay:
                    "https://overwatch.nosdn.127.net/1/images/v2/home/overlay/soldier-76.png",
                icon: "https://overwatch.nosdn.127.net/1/images/heroes/soldier-76/icon-portrait.png",
            },
            {
                href: "/heroes/sombra",
                name: "“黑影”",
                role: "输出",
                id: "damage",
                description: "臭名昭著的黑客，沉迷于揭秘——及其带来的权力。",
                overlay:
                    "https://overwatch.nosdn.127.net/1/images/v2/home/overlay/sombra.png",
                icon: "https://overwatch.nosdn.127.net/1/images/heroes/sombra/icon-portrait.png",
            },
            {
                href: "/heroes/symmetra",
                name: "“秩序之光”",
                role: "输出",
                id: "damage",
                description:
                    "一名通过控制高强度光束，将世界改造成她心目中完美、有序的模样的光子建筑师。",
                overlay:
                    "https://overwatch.nosdn.127.net/1/images/v2/home/overlay/symmetra.png",
                icon: "https://overwatch.nosdn.127.net/1/images/heroes/symmetra/icon-portrait.png",
            },
            {
                href: "/heroes/torbjorn",
                name: "托比昂",
                role: "输出",
                id: "damage",
                description: "一名天才工程师，可以在战场上打造武器系统。",
                overlay:
                    "https://overwatch.nosdn.127.net/1/images/v2/home/overlay/torbjorn.png",
                icon: "https://overwatch.nosdn.127.net/1/images/heroes/torbjorn/icon-portrait.png",
            },
            {
                href: "/heroes/tracer",
                name: "“猎空”",
                role: "输出",
                id: "damage",
                description:
                    "一名前守望先锋特工，同时也是可以穿梭时间的充满正义的冒险家。",
                overlay:
                    "https://overwatch.nosdn.127.net/1/images/v2/home/overlay/tracer.png",
                icon: "https://overwatch.nosdn.127.net/1/images/heroes/tracer/icon-portrait.png",
            },
            {
                href: "/heroes/widowmaker",
                name: "“黑百合”",
                role: "输出",
                id: "damage",
                description:
                    "一名完美的杀手：耐心、果断、无情。没有任何情感且事后毫无悔意。",
                overlay:
                    "https://overwatch.nosdn.127.net/1/images/v2/home/overlay/widowmaker.png",
                icon: "https://overwatch.nosdn.127.net/1/images/heroes/widowmaker/icon-portrait.png",
            },
            {
                href: "/heroes/baptiste",
                name: "巴蒂斯特",
                role: "支援",
                id: "support",
                description: "一位配备了新型治疗设备的精英战地医疗兵。",
                overlay:
                    "https://overwatch.nosdn.127.net/1/assets/images/hero/baptiste/full-portrait.png",
                icon: "https://overwatch.nosdn.127.net/1/assets/images/hero/baptiste/icon-portrait.png",
            },
            {
                href: "/heroes/ana",
                name: "安娜",
                role: "支援",
                id: "support",
                description:
                    "守望先锋的创始成员之一，“起死回生”重返战场保护亲人和朋友。",
                overlay:
                    "https://overwatch.nosdn.127.net/1/images/v2/home/overlay/ana.png",
                icon: "https://overwatch.nosdn.127.net/1/images/heroes/ana/icon-portrait.png",
            },
            {
                href: "/heroes/brigitte",
                name: "布丽吉塔",
                role: "支援",
                id: "support",
                description: "一位渴望冒险，希望惩强扶弱的重装战士。",
                overlay:
                    "https://overwatch.nosdn.127.net/1/images/v2/home/overlay/brigitte.png",
                icon: "https://overwatch.nosdn.127.net/1/images/heroes/brigitte/icon-portrait.png",
            },
            {
                href: "/heroes/lucio",
                name: "卢西奥",
                role: "支援",
                id: "support",
                description: "一位国际名人，通过音乐和巡演激发社会正能量。",
                overlay:
                    "https://overwatch.nosdn.127.net/1/images/v2/home/overlay/lucio.png",
                icon: "https://overwatch.nosdn.127.net/1/images/heroes/lucio/icon-portrait.png",
            },
            {
                href: "/heroes/mercy",
                name: "“天使”",
                role: "支援",
                id: "support",
                description:
                    "一名集顶尖的治疗者、出色的科学家和坚定的和平主义者于一身的守护天使。",
                overlay:
                    "https://overwatch.nosdn.127.net/1/images/v2/home/overlay/mercy.png",
                icon: "https://overwatch.nosdn.127.net/1/images/heroes/mercy/icon-portrait.png",
            },
            {
                href: "/heroes/moira",
                name: "莫伊拉",
                role: "支援",
                id: "support",
                description: "一位天才基因科学家，无视道德的束缚，一心追求科学发现。",
                overlay:
                    "https://overwatch.nosdn.127.net/1/images/v2/home/overlay/moira-full-portrait.png",
                icon: "https://overwatch.nosdn.127.net/1/assets/images/hero/moira/icon-portrait.png",
            },
            {
                href: "/heroes/zenyatta",
                name: "禅雅塔",
                role: "支援",
                id: "support",
                description: "一位游走于世界寻找灵魂升华之道的机械僧侣。",
                overlay:
                    "https://overwatch.nosdn.127.net/1/images/v2/home/overlay/zenyatta.png",
                icon: "https://overwatch.nosdn.127.net/1/images/heroes/zenyatta/icon-portrait.png",
            },
        ];

        new Vue({
            el: "#app",
            data: {
                heroes: heroes,
            },
        });
    </script>
</body>

</html>